.timeline {
	list-style: none;
	padding: 20px 0 20px;
	position: relative;
	width: 800px;
	margin:0 auto;
	&:before {
		top: 0;
		bottom: 0;
		position: absolute;
		content: " ";
		width: 3px;
		background-color: #eeeeee;
		left: 50%;
		margin-left: -1.5px;
	}

	li {
		position: relative;
		min-height:25px;
		&:before,
		&:after {
			content: " ";
			display: table;
			clear: both;
		}
		.timeline-panel {
			width: 260px;
			float: left;
			border-width: 0 2px 0 0;
			border-style: solid;
			padding: 5px 10px;
			position: relative;
			text-align:right;
			margin-top: -15px;
			&:before {
				content: '';
				position: absolute;
				display: block;
				width: 120px;
				height: 0px;
				border-width: 2px 0 0 0;
				border-style: dotted;
				top: 15px;
				right: -120px;
			}
			&:after {
				position: absolute;
			}
		}
		.timeline-badge {
			.badge {
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				position: absolute;
				top: 0px;
				left: 400px;
				font-weight:lighter;
				margin-left: -20px;
				margin-top: -8px;
				color:#333;
				&:before,
				&:after {
				    content: "";
				    position: absolute;
				    top: 0;
				    left: 0;
				    width: 18px;
				    height: 18px;
				    border-width: 2px;
				    border-style: solid;
			        border-radius: 50px 50px 0 50px;
				    -webkit-transform: rotate(-45deg);
				    transform: rotate(-45deg);
				}

				&:after {
				    left: auto;
				    right: 0;
				    border-radius: 50px 50px 50px 0;
				    -webkit-transform: rotate(45deg);
				    transform: rotate(45deg);
				}

			}
		}
		&.timeline-blue {
			@color: #3b83c0;
			.timeline-panel {
				border-color: @color;
				&:before {
					border-color: @color;
				}
			}
			.timeline-badge .badge {
				&:before,
				&:after {
					border-color: @color;
				}
			}
		}
		&.timeline-red {
			@color: #d95c5c;
			.timeline-panel {
				border-color: @color;
				&:before {
					border-color: @color;
				}
			}
			.timeline-badge .badge {
				&:before,
				&:after {
					border-color: @color;
				}
			}
		}
		&.timeline-green {
			@color: #5bbd72;
			.timeline-panel {
				border-color: @color;
				&:before {
					border-color: @color;
				}
			}
			.timeline-badge .badge {
				&:before,
				&:after {
					border-color: @color;
				}
			}
		}
		&.timeline-inverted {
			.timeline-panel {
				float: right;
				border-width: 0 0 0 2px;
				border-right: none;
				text-align:left;
				&:before {
					left: -120px;
					right: auto;
				}
			}
		}
	}

	.timeline-title {
		margin-top: 0;
		color: inherit;
		font-size:16px;
		font-weight:bold;
	}
	.timeline-time {
		color:#888;
		font-size:13px;
	}

	.timeline-body {
		&>p,
		&>ul {
			margin-bottom: 0;
		}
		&>p+p {
			margin-top: 5px;
		}
	}
}
